<template>
  <div style="padding:10px;box-sizing:border-box">
    <el-row type="flex" justify="space-between" style="margin-bottom:10px">
      <el-col :span="6">
        <el-button type="success" plain round @click="add">添加</el-button>
      </el-col>
      <el-col :span="6"> </el-col>
      <el-col :span="6"> </el-col>
      <el-col :span="6">
        <el-button type="warning" plain round @click="clear"
          >清除缓存</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="tableData" style="width: 100%" height="500">
          <el-table-column prop="id" label="编号"> </el-table-column>
          <el-table-column prop="parent_id" label="上级名称"> </el-table-column>
          <el-table-column prop="name" label="城市名称"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >编辑</el-button
              >

              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                title="确定删除吗？"
                @confirm="del({ ...scope.row })"
                style="margin-left:5px"
              >
                <el-button slot="reference" type="text" size="small"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <CityModel :form="form" :title="title" :list="list" @finish="finish" />
  </div>
</template>

<script>
import {
  getCityList,
  clearCache,
  addCity,
  confirmAdd,
  delCity,
  editCity,
  confirmEdit,
} from "../../api/Logistics";
import CityModel from "../../components/CityModel";
export default {
  components: { CityModel },
  data() {
    return {
      tableData: [],
      title: "",
      form: {
        dialogFormVisible: false,
        id: "",
        level: 0,
        parent_id: 0,
        parent_name: "中国",
        name: "",
        merger_name: "",
      },
      list: [],
    };
  },

  methods: {
    handleClick(row) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      editCity(row.id).then((res) => {
        this.title = res.data.data.title;
        this.form.dialogFormVisible = res.data.data.status;
        this.form.id = row.id;
        this.form.level = row.level;
        this.form.parent_id = row.parent_id;
        this.form.parent_name = "中国";
        this.form.merger_name = row.merger_name;
        this.form.name = row.name;
        this.list = res.data.data.rules;
        loading.close();
      });
    },
    clear() {
      clearCache().then((res) => {
        if (res.data.status == 200) {
          this.$notify({
            title: "success",
            message: res.data.msg,
            type: "success",
            position: "top-left",
          });
        } else {
          this.$notify.error({
            title: "error",
            message: res.data.msg,
            position: "top-left",
          });
        }
      });
    },
    add() {
      this.form.name = "";
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      addCity().then((res) => {
        loading.close();
        this.title = res.data.data.title;
        this.list = res.data.data.rules;
        this.form.dialogFormVisible = res.data.data.status;
      });
    },
    finish(e) {
      if (!e.id) {
        this.form.dialogFormVisible = false;
        confirmAdd(this.form).then((res) => {
          if (res.data.status == 200) {
            this.getData();
          } else {
            this.$message({ type: "error", message: res.data.msg });
          }
        });
      } else {
        confirmEdit(this.form).then((res) => {
          if (res.data.status == 200) {
            this.getData();
          } else {
            this.$message({ type: "error", message: res.data.msg });
          }
        });
      }
      this.form.dialogFormVisible = false;
    },
    del(e) {
      delCity(e.city_id).then((res) => {
        if (res.data.status == 200) {
          this.getData();
        } else {
          this.$message({ type: "error", message: res.data.msg });
        }
      });
    },
    getData() {
      getCityList(0).then((res) => {
        this.tableData = res.data.data;
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="less" scoped></style>
